<template>
<div>
     <el-form-item>
    <el-radio-group v-model="status" size="small" @change="sessionSave">
        <el-radio-button label="new">新建</el-radio-button>
        <el-radio-button label="existing">选择已有</el-radio-button>
    </el-radio-group>
    </el-form-item>
    <el-form-item label="选择已有系列" v-if="status == 'existing'" :prop="`campaign.campaign_id`" :rules="{required: true, message: '请选择', trigger: ['blur', 'change']}">
        <el-select v-model="dataForm.campaign.campaign_id"  popper-class="partner_select" clearable placeholder="请选择" @change="changeData" @focus="handleFocus">
            <el-option
            v-for="item in list"
            :key="item.campaign_id"
            :label="item.campaign_name"
            :value="item.campaign_id">
            </el-option>
        </el-select>
    </el-form-item>
</div>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {
            status: "existing",
            list:[],
            queryInfo:{
                page:1,
                advertiser_id:''
            }
        };
    },
    created() {
        this.getCampaignList()
    },
        watch: {  
            // 开启深度监听  
            dataForm: {  
            handler(newVal, oldVal) {
                this.status = newVal.campaign.campaign_id ? 'existing':'new';
            },  
            deep: true,
            immediate: true, 
            }  
        },
    methods: {
        handleFocus(event) {
            document.getElementsByClassName('partner_select')[0].children[0].children[0].addEventListener('scroll', this.handleScroll);
            },
        handleScroll(event) {
            const { scrollHeight, scrollTop, clientHeight } = event.target;
            if (scrollHeight - (scrollTop + clientHeight) < 20) { // 距离底部10px时加载更多
                this.loadMore();
            }
        },
       async loadMore() {
            this.queryInfo.page++
            const { data: res } = await this.$http.post(this.$tiktokUrl + 'launch/TiktokInfo/campaignList',this.queryInfo);
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.list = [...this.list,...res.data.list];
            }
        },
        changeData(value){
            let arr = this.list.find(e=>e.campaign_id == value)
            this.dataForm.campaign.operation_status = arr.operation_status
            this.dataForm.campaign.budget_mode = arr.budget_mode
            this.dataForm.campaign.budget = arr.budget
            this.dataForm.campaign.budget_mode_status = arr.budget_mode
            console.log(arr)
            console.log(this.dataForm)
            
        },
        getCampaignList(){
            this.queryInfo.advertiser_id = this.dataForm.base[0].advertiser_id
            this.$http.get(this.$tiktokUrl + 'launch/TiktokInfo/campaignList',{params:this.queryInfo}).then(e=>{
                this.list = e.data.data.list
                console.log(e)
            })
        },
        sessionSave(){
             window.sessionStorage.setItem("tkFormSeries",this.status);
            if(this.status == 'new'){
                this.dataForm.campaign.campaign_id = ''
            }
            
            this.$bus.emit("tkFormSeries", this.status);
        }
    },
};
</script>


<style scoped>
</style>

